終於來到 Footer 了ＱＱ，總覺得寫了好久

新增檔案

跟前面的流程一樣，新增 footer 的 js, sass 檔案，並且匯入

// Footer.js

import React from "react";
export default function Footer() {
  return (
    <div>
      <div>test</div>
    </div>
  );
}

// App.js

import "../src/assets/sass/main.sass";
import Header from "./components/Header";
import Article from "./components/Article";
import Footer from "./components/Footer";
function App() {
  return (
    <div className="container">
      <Header />
      <Article />
      <Footer />
    </div>
  );
}

export default App;

// main.sass

@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"
@import "modal"
@import "article"
@import "footer"

結束！接著來排版內容

Footer 本人

這邊別忘了再加上 line 在 icon 系列中～

因為 icon 被重複使用到了，這邊使用 flex 做個優化加上把內容統整過，讓 sass 能更簡潔！

// Footer.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
import {
  faFacebookF,
  faInstagram,
  faYoutube,
  faLine,
} from "@fortawesome/free-brands-svg-icons";

export default function Footer() {
  const info = [
    "Masthead",
    "連絡我們",
    "Careers",
    "服務條款與隱私權聲明",
    "Media kit",
    "會員電子報",
    "雜誌訂閱",
    "廣告素材規範",
  ];
  return (
    <div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
      <div className="footer">
        <div className="edition">
          EDITION
          <button>
            TAIWAN
            <FontAwesomeIcon icon={faAngleDown} size="lg" />
          </button>
        </div>
        <div className="dark-gray">
          <div className="logo">VOGUE</div>
          <div className="icon">
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faFacebookF} className="social-media" />
              </div>
            </div>
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faInstagram} className="social-media" />
              </div>
            </div>
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faYoutube} className="social-media" />
              </div>
            </div>
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faLine} className="social-media" />
              </div>
            </div>
          </div>
        </div>
        <div className="footer-content">
          <div class="conde-nast">
            conde nast <p>taiwan</p>
          </div>
          <div className="footer-link-group">
            {info.map((item) => {
              return (
                <a href="#" className="footer-link">
                  {item}
                </a>
              );
            })}
            <div className="footer-link">Cookies</div>
          </div>
          <div className="copyright">© 2021 Condé Nast</div>
        </div>
      </div>
    </div>
  );
}

這邊還蠻多之前已經用過的元素，組裝起來很快速，之前講過的東西就不重複說明了，一樣有問題可以在下方留言～

// _footer.sass

.footer
    @extend %link-font
    font-weight: normal
    color: $primary-background-color
    background-color: $darker-gray
    height: auto
    padding: 0 0 32px 0
    .edition
        padding: 0 76px
        text-align: right
        font-weight: bold

        button
            margin: 0 0 0 8px
            padding: 18px 24px
            color: $primary-background-color
            border: none
            background-color: $secondary-color

    .dark-gray
        padding: 0 4vw
        align-items: center
        background-color: $footer-gray
        display: flex
        justify-content: space-around

        .logo
            @extend %logo-font
            margin: -80px 0
            font-size: 290px
            letter-spacing: -16px
            color: $darker-gray
            font-weight: 100
        .icon
            gap: 16px
            .icon-wrapper
                border: 1px solid $primary-background-color
                &:hover
                    border: 1px solid $secondary-color

    &-content

        text-align: center
        @extend %link-font
        font-weight: 100

        .conde-nast
            @extend %logo-font
            text-transform: uppercase
            padding: 16px
            font-size: 32px
            p
                @extend %link-font
                font-size: 8px

    &-link
        font-size: 12px
        margin: 6px 12px
        display: inline-block
        color: $primary-background-color
        text-transform: capitalize

        &-group
            margin: 16px
        &:hover
            color: $dark-gray

    .copyright
        margin: 48px
        color: $gray
        font-size: 11px
        background-color: $darker-gray

sass 的部分大部分都是排版跟細節挑整，就不說明細節了，這次用到了比較多 flex box 的用法，尤其是在更新 icon 的做法上，因為之前的方法不管如何都無法讓長寬不一的 icon 們有個正圓，所以這次用了先畫圓再套上 icon 的做法，而這個作法使用到 flex box 的方法讓我研究了十分之久！：Ｄ

因為 icon 再 modal 上也會用到，所以我把他抽到了 basic 來統一設定樣式，這樣就可以一魚兩吃！（？

// _basic.sass

.icon
    display: flex
    width: 150px
    gap: 8px
    &-box,&-wrapper
        display: flex
        justify-content: center
        align-items: center

    &-wrapper
        border-radius: 50%
        overflow: hidden
        border: 1px solid $darker-gray
        font-size: 1.5rem
        width: 40px
        height: 40px

        &:hover
            @extend %icon-link-hover

        ::selection
            background: $secondary-color

這邊先在最外框 icon 這個 class 放上 flex 的樣式，讓接下來套用這個 div 的內容都可以使用 flex 的屬性，box, wrapper 分別放上調整位置為置中的 justify-content, align-items 來使圓形以及 icon 本人對其，wrapper 再設定上圓形的屬性即可。

關於 flex box 的介紹可以參考這裡～裡面有圖解的介紹蠻清楚的！

A Complete Guide to Flexbox

恩，好像應該早點開始用 flex box XD

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？